<template>
    <div class="conatainer" v-loading="loadingPage">
        <div class="upload-wrap" v-if="isAuth == 1">
            <div class="success-img">
                <img src='../../assets/img/success.png' />
                <p>认证成功</p>
            </div>
        </div>
        <div class="upload-wrap" v-else>
            <template v-if="!form.license">
                <el-upload :action="uploadUrl" :headers="headers" :data="fileData" name="iFile" :auto-upload="true" :show-file-list="false"
                           :on-progress="handleProgress" :on-success="handleSuccess">
                    <div class="upload-img">
                        <img src='../../assets/img/upload.png' />
                        <p>点击上传营业执照</p>
                    </div>
                </el-upload>
                <el-progress :percentage="precent" :show-text="false" class="progress" v-if="showProgress"></el-progress>
            </template>
            <div class="business-license" v-else>
                <div class="license">
                    <img :src='form.license' />
                </div>
                <i class="el-icon-error close" @click="removeImg"></i>
            </div>
        </div>
        <div class="form-wrap">
            <div class="form-item">
                <label>公司名称<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <input type='text' placeholder="请填写公司名称" v-model="form.company_name" v-if="isAuth == 0 && authCompanyId > 0" readonly/>
                    <input type='text' placeholder="请填写公司名称" v-model="form.company_name" v-else-if="isAuth == 1 && authCompanyId > 0" readonly/>
                    <input type='text' placeholder="请填写公司名称" v-model="form.company_name" v-else/>
                    <!-- <input type='tel' placeholder="请填写公司名称" v-model="form.company_name" :readonly="isAuth != 1 ? false:true" /> -->
                </div>
            </div>
            <div class="form-item">
                <label>企业税号<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <input type='text' placeholder="15或者17或者18或者20位字母数字组成" v-model="form.tax_number" v-if="isAuth == 0 && authCompanyId > 0" readonly/>
                    <input type='text' placeholder="15或者17或者18或者20位字母数字组成" v-model="form.tax_number" v-else-if="isAuth == 1 && authCompanyId > 0" readonly/>
                    <input type='text' placeholder="15或者17或者18或者20位字母数字组成" v-model="form.tax_number" v-else/>
                </div>
            </div>
        </div>
        <div class="form-wrap">
            <div class="form-item">
                <label>所在区域<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <el-select v-model="form.company_id" placeholder="请选择所在区域" v-if="isAuth == 0 && authCompanyId > 0" disabled>
                        <el-option v-for="item in companyList" :key="item.company_id" :label="item.area_name" :value="item.company_id">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.company_id" placeholder="请选择所在区域"  v-else-if="isAuth == 1 && authCompanyId > 0" disabled>
                        <el-option v-for="item in companyList" :key="item.company_id" :label="item.area_name" :value="item.company_id">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.company_id" placeholder="请选择所在区域" v-else>
                        <el-option v-for="item in companyList" :key="item.company_id" :label="item.area_name" :value="item.company_id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="form-item">
                <label>联系人<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <input type='text' placeholder="请填写联系人" v-model="form.contact"/>
                </div>
            </div>
            <div class="form-item">
                <label>联系电话<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <input type='tel' placeholder="请填写联系电话" v-model="form.phone"/>
                </div>
            </div>
        </div>
        <el-button class="btn" :disabled="isDisabled" :loading="isLoading" @click='toSubmit'>{{ btnText }}</el-button>
    </div>
</template>

<script>
import urlObj from "@/utils/baseUrl.js";
import {
    deleteFile, getCompanyData,
    userInfo,
} from '../../api/base';
import {
    authCompany
} from '../../api/user';
import BaseImg from '@/components/BaseImg.vue';
export default {
    components: { BaseImg },
    data() {
        return {
            loadingPage:true,
            uploadUrl: urlObj.hostUrl + "/uploadFile",
            headers: {
                Authorization: localStorage.getItem("Client-Access-Token")
                    ? localStorage.getItem("Client-Access-Token")
                    : "",
            },
            fileData: {
                type: 10,
            },
            showHandle: false,
            precent: 0,
            showProgress: false,
            form: {
                company_name: '',
                tax_number: '',
                company_id: '',
                contact: '',
                phone: '',
                license: '',
            },
            isAuth: 0,
            authCompanyId:'',
            isDisabled: false,
            isLoading: false,
            btnText: '提交',
            companyList: []
        }
    },
    created() {
        this.getCompanyInfo();
        this.getCompanyData();
    },
    methods: {
        handleProgress(event) {
            this.showProgress = true;
            this.precent = Math.round((event.loaded / event.total) * 100);
        },
        handleSuccess(res) {
            if (res.code == 0) {
                this.$nextTick(() => {
                    this.form.license = res.file_url;
                    this.showProgress = false;
                    this.precent = 0;
                })
            } else {
                this.showProgress = false;
                this.precent = 0;
            }
        },
        removeImg() {
            this.form.license = "";
        },
        //获取认证公司信息
        getCompanyInfo() {
            const that = this;
            userInfo().then(res => {
                that.loadingPage = false;
                if (res.code == 0) {
                    if (res.data.is_auth == 0 && res.data.company_id > 0) {
                        that.isDisabled = true;
                        that.btnText = '您的资料正在审核中，请耐心等候'
                    }
                    if (res.data.is_auth == 2 && res.data.company_id > 0) {
                        // that.isDisabled = true;
                        that.btnText = '您的资料认证不通过，请重新提交'
                    }
                    if (res.data.is_auth == 1 && res.data.company_id > 0) {
                        // that.isDisabled = true;
                        that.btnText = '编辑'
                    }
                    that.isAuth = res.data.is_auth;
                    that.authCompanyId = res.data.company_id;
                    that.form.company_name = res.data.company_name
                    that.form.tax_number = res.data.tax_number
                    that.form.company_id = res.data.company_id == 0 ? '' : res.data.company_id
                    that.form.contact = res.data.contact
                    that.form.phone = res.data.phone
                    that.form.license = res.data.license
                    that.areaName = res.data.area_name
                }
            })
        },
        getCompanyData() {
            const that = this;
            getCompanyData().then(res => {
                if (res.code == 0) {
                    that.companyList = res.data;
                }
            })
        },
        /**
             * 验证税号
             * 15或者17或者18或者20位字母、数字组成
             * @param obj
             * @returns {Boolean}
             */
        checkTax(obj) {
            const isRight = /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(obj);
            return isRight
        },
        toSubmit() {
            const that = this;
            if (!that.form.license) {
                this.$message.error('请上传营业执照')
                return;
            }
            if (!that.form.company_name) {
                this.$message.error('请输入公司名称')
                return;
            }
            if (!that.form.tax_number) {
                this.$message.error('请输入公司税号')
                return;
            }
            if (!that.checkTax(that.form.tax_number)) {
                this.$message.error('公司税号为15或者17或者18或者20位字母、数字')
                return;
            }
            if (!that.form.company_id) {
                this.$message.error('请选择所在区域')
                return;
            }
            if (!that.form.contact) {
                this.$message.error('请填写联系人')
                return;
            }
            if (!that.form.phone) {
                this.$message.error('请输入手机号')
                return;
            }
            if (!(/^1[3456789]\d{9}$/.test(that.form.phone))) {
                this.$message.error('手机号码不合法，请重新输入')
                return;
            }
            that.isDisabled = true;
            that.isDisabled = true;
            authCompany(this.form).then(res => {
                if (res.code == 0) {
                    that.$message.success(res.msg);
                    that.isDisabled = false;
                    that.isDisabled = false;
                    setTimeout(() => {
                        // this.$router.back();
                        that.$router.replace('/')
                    }, 1000)
                } else {
                    that.isDisabled = false;
                    that.isDisabled = false;
                }
            })
        },
    }

}
</script>

<style lang="scss" scoped>
.upload-wrap {
    width: 100%;
    height: 328px;
    background: #ffffff;
    border-radius: 4px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    .upload-img {
        width: 325px;
        margin: auto;
        img {
            width: 100%;
            height: 223px;
        }
        p {
            text-align: center;
        }
    }
    .success-img {
        width: 218px;
        margin: auto;
        img {
            width: 100%;
            height: 204px;
        }
        p {
            text-align: center;
        }
    }
    .progress {
        width: 380px;
        margin-top: 20px;
    }
    .business-license {
        width: 325px;
        height: 100%;
        .license {
            width: 325px;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
    .close {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 24px;
    }
}
.form-wrap {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    padding: 0 12px;
    box-sizing: border-box;
    margin-top: 12px;
    label {
        width: 70px;
        font-size: 14px;
        i {
            font-size: 8px;
            position: relative;
            bottom: 2px;
            color: #ff3838;
        }
    }

    .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        .form-input {
            flex: 1;
            height: 42px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;

            input {
                width: 100%;
                height: 100%;
            }
        }
        ::v-deep .el-select {
            width: 100%;
            .el-input__inner {
                border: 0;
                padding: 0;
            }
        }
        ::v-deep .el-input.is-disabled .el-input__inner {
            background-color: #fff;
            cursor: not-allowed;
        }
    }
}
.btn {
    width: 330px;
    height: 40px;
    background: var(--main-color);
    border-radius: 52px;
    color: #fff;
    border: 0;
    margin: 30px auto 0;
    display: block;
    &.is-disabled {
        background-color: rgba(48, 179, 14, 0.5) !important;
        color: rgba(255, 255, 255, 0.5);
    }
}
</style>